<template>
  <el-dialog :title="setep === 1 ? '设置用电参数' : '设置进度'" :visible="open" :before-close="onClose" append-to-body
    v-loading="loading" width="1400px">
    <template v-if="setep === 1">
      <el-form :model="form" ref="form" size="small" :inline="false" label-width="110px" :rules="rules">
        <el-row class="card">
          <el-col :span="24" style="padding: 8px 10px; text-align: right">
            <el-checkbox label="批量设置" v-model="form.isBatch"></el-checkbox>
            <el-checkbox label="是否下发" :true-label="1" :false-label="0" v-model="form.allots"></el-checkbox>
          </el-col>
          <el-col :span="24">
            <el-form-item label="已选房间" prop="currentRoom">
              <el-select v-model="currentRoom" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in options" :key="item.roomId" :label="item.roomNo"
                  :value="item.roomId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="夜间总功率" prop="sumPower">
              <el-input v-model="form.sumPower" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时段工作模式" prop="runType">
              <el-select v-model="form.runType" style="width: 100%">
                <el-option :value="0" label="无时控"></el-option>
                <el-option :value="1" label="有时控"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="周一起止时间" prop="seDt1">
              <div style="display: flex;">
                <TimePicker :value="form.isBatch ? form.batchTime1 : form.sdt1"
                  @input="val => setTime(val, 'sdt1', 'batchTime1')" />
                <Select1 v-model="form.sdt1State" />-
                <TimePicker :value="form.isBatch ? form.batchTime2 : form.edt1"
                  @input="val => setTime(val, 'edt1', 'batchTime2')"
                  :minTime="form.isBatch ? form.batchTime1 : form.sdt1" />
                <Select1 v-model="form.edt1State" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="周二起止时间" prop="seDt2">
              <div style="display: flex;">
                <TimePicker :value="form.isBatch ? form.batchTime1 : form.sdt2"
                  @input="val => setTime(val, 'sdt2', 'batchTime1')" />
                <Select1 v-model="form.sdt2State" />-
                <TimePicker :value="form.isBatch ? form.batchTime2 : form.edt2"
                  @input="val => setTime(val, 'edt2', 'batchTime2')"
                  :minTime="form.isBatch ? form.batchTime1 : form.sdt2" />
                <Select1 v-model="form.edt2State" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="周三起止时间" prop="seDt3">
              <div style="display: flex;">
                <TimePicker :value="form.isBatch ? form.batchTime1 : form.sdt3"
                  @input="val => setTime(val, 'sdt3', 'batchTime1')" />
                <Select1 v-model="form.sdt3State" />-
                <TimePicker :value="form.isBatch ? form.batchTime2 : form.edt3"
                  @input="val => setTime(val, 'edt3', 'batchTime2')"
                  :minTime="form.isBatch ? form.batchTime1 : form.sdt3" />
                <Select1 v-model="form.edt3State" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="周四起止时间" prop="seDt4">
              <div style="display: flex;">
                <TimePicker :value="form.isBatch ? form.batchTime1 : form.sdt4"
                  @input="val => setTime(val, 'sdt4', 'batchTime1')" />
                <Select1 v-model="form.sdt4State" />-
                <TimePicker :value="form.isBatch ? form.batchTime2 : form.edt4"
                  @input="val => setTime(val, 'edt4', 'batchTime2')"
                  :minTime="form.isBatch ? form.batchTime1 : form.sdt4" />
                <Select1 v-model="form.edt4State" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="周五起止时间" prop="seDt5">
              <div style="display: flex;">
                <TimePicker :value="form.isBatch ? form.batchTime1 : form.sdt5"
                  @input="val => setTime(val, 'sdt5', 'batchTime1')" />
                <Select1 v-model="form.sdt5State" />-
                <TimePicker :value="form.isBatch ? form.batchTime2 : form.edt5"
                  @input="val => setTime(val, 'edt5', 'batchTime2')"
                  :minTime="form.isBatch ? form.batchTime1 : form.sdt5" />
                <Select1 v-model="form.edt5State" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="周六起止时间" prop="seDt6">
              <div style="display: flex;">
                <TimePicker :value="form.isBatch ? form.batchTime1 : form.sdt6"
                  @input="val => setTime(val, 'sdt6', 'batchTime1')" />
                <Select1 v-model="form.sdt6State" />-
                <TimePicker :value="form.isBatch ? form.batchTime2 : form.edt6"
                  @input="val => setTime(val, 'edt6', 'batchTime2')"
                  :minTime="form.isBatch ? form.batchTime1 : form.sdt6" />
                <Select1 v-model="form.edt6State" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="周日起止时间" prop="seDt7">
              <div style="display: flex;">
                <TimePicker :value="form.isBatch ? form.batchTime1 : form.sdt7"
                  @input="val => setTime(val, 'sdt7', 'batchTime1')" />
                <Select1 v-model="form.sdt7State" />-
                <TimePicker :value="form.isBatch ? form.batchTime2 : form.edt7"
                  @input="val => setTime(val, 'edt7', 'batchTime2')"
                  :minTime="form.isBatch ? form.batchTime1 : form.sdt7" />
                <Select1 v-model="form.edt7State" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="text-align: center;padding-bottom: 5px;color: red"
            v-if="isNew">起止时间按照从早到晚的顺序设置</el-col>
        </el-row>
      </el-form>
    </template>
    <div v-else>
      <div style="text-align: center;padding-bottom: 10px">
        设置完成，总数：
        <span style="color: red">{{ success + error }}</span>，成功：
        <span style="color: red">{{ success }}</span>，失败：
        <span style="color: red">{{ error }}</span>
      </div>
      <el-table :data="setList">
        <el-table-column label="房间号" align="center" prop="roomNo" />
        <el-table-column label="电表号" align="center" prop="meterNo" />
        <el-table-column label="设置状态" align="center" prop="status">
          <template slot-scope="scope">{{ scope.row.status == 0 ? '成功' : '失败' }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer">
      <template v-if="setep === 1">
        <el-button size="small" @click="onClose">取消</el-button>
        <el-button size="small" type="primary" @click="submitData">确定</el-button>
      </template>
      <template v-else>
        <el-button size="small" @click="onClose">完成</el-button>
      </template>
    </div>
    <ResultStatuListModal ref="ResultStatuListModal" @refresh="$emit('refresh')" />
  </el-dialog>
</template>

<script>
import ResultStatuListModal from "@/components/ResultStatuListModal.vue";
import TimePicker from "./TimePicker";
import Select1 from "./Select";
import { tpSet } from "@/api/param/timeSpan";
// import RoomSelect from "@/components/RoomSelect.vue";
export default {
  components: {
    TimePicker,
    Select1
  },
  provide() {
    return {
      setting: this
    };
  },
  data() {
    return {
      open: false,
      form: {
        allots: 1,
        runType: null,
        sumPower: null,
        isBatch: null,
        sdt1: null,
        sdt2: null,
        sdt3: null,
        sdt4: null,
        sdt5: null,
        sdt6: null,
        sdt7: null,
        sdt1State: null,
        sdt2State: null,
        sdt3State: null,
        sdt4State: null,
        sdt5State: null,
        sdt6State: null,
        sdt7State: null,
        edt1: null,
        edt2: null,
        edt3: null,
        edt4: null,
        edt5: null,
        edt6: null,
        edt7: null,
        edt1State: null,
        edt2State: null,
        edt3State: null,
        edt4State: null,
        edt5State: null,
        edt6State: null,
        edt7State: null
      },
      rules: {},
      setep: 1,
      loading: false,
      setList: [],
      roomIds: [],
      currentRoom: null,
      options: [],
      isNew: false
    };
  },
  computed: {
    success() {
      return this.setList?.filter(item => item.status == 0).length || 0;
    },
    error() {
      return this.setList?.filter(item => item.status == 1).length || 0;
    }
  },
  methods: {
    show(roomIds, selection) {
      if (new Set(selection.map(i => i.meterType)).size > 1) {
        return this.$message.error("新旧设备不可同时设置");
      }
      // 判断新旧设备
      this.isNew = selection[0].meterType == 1;
      Object.keys(selection[0]).map(key => {
        this.form[key] = selection[0][key];
      });
      this.open = true;
      this.roomIds = roomIds;
      this.options = selection;
      this.currentRoom = selection[0].roomId;
    },
    onClose() {
      this.form = {
        allots: 1,
        runType: null,
        sumPower: null,
        isBatch: null,
        sdt1: null,
        sdt2: null,
        sdt3: null,
        sdt4: null,
        sdt5: null,
        sdt6: null,
        sdt7: null,
        sdt1State: null,
        sdt2State: null,
        sdt3State: null,
        sdt4State: null,
        sdt5State: null,
        sdt6State: null,
        sdt7State: null,
        edt1: null,
        edt2: null,
        edt3: null,
        edt4: null,
        edt5: null,
        edt6: null,
        edt7: null,
        edt1State: null,
        edt2State: null,
        edt3State: null,
        edt4State: null,
        edt5State: null,
        edt6State: null,
        edt7State: null
      };
      this.open = false;
      this.setep = 1;
    },
    submitData() {
      this.$refs["form"].validate(valid => {
        if(this.form.allots == 1 && this.form.runType != 1) {
          this.$message.error("如果勾选“是否下发”，时段工作模式必须选择“有时控”")
          return
        }
        if(this.form.allots != 1 && this.form.runType == 1) {
          this.$message.error("如果时段工作模式必须选择“有时控”，必须勾选“是否下发”")
          return
        }
        if (valid) {
          this.$refs.ResultStatuListModal.show({
            title: "您确定要设置数据？",
            actionName: "设置",
            total: this.options.length,
            handler: onItemOver => {
              this.onClose()
              return tpSet(
                {
                  tparamTpList: this.roomIds.map(id => {
                    return {
                      ...(this.options.find(item => item.roomId == id) || {}),
                      ...this.form,
                      roomId: id
                    };
                  })
                },
                onItemOver
              )
            }
          });
        }
      });
    },
    setTime(val, name, batchTime) {
      if (this.form.isBatch) {
        this.$set(this.form, batchTime, val);
      } else {
        this.$set(this.form, name, val);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  background-color: whitesmoke;
  padding-top: 10px;
  border-radius: 5px;
  padding-right: 12px;
}
</style>